<template>
  <el-dialog
    title="题目预览"
    :visible="dialogVisible"
    @close="closeDialog"
    @open="openDialog"
    width="60%"
  >
    <div>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】：{{ questionInfo.questionType }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【编号】：{{ questionInfo.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】：{{ questionInfo.difficulty }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【标签】：{{ questionInfo.tags }}
          </div></el-col
        >
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】：{{ questionInfo.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【目录】：{{ questionInfo.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】：{{ questionInfo.direction }}
          </div></el-col
        >
      </el-row>
    </div>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple">
          <div>【题干】</div>
          <div v-html="questionInfo.question" class="questionDatil"></div></div
      ></el-col>
    </el-row>
    <div>
      <!-- 单选 -->
      <div v-if="questionInfo.questionType === '单选'">
        <el-radio-group v-model="radio1[0].title">
          <el-radio
            v-for="item in ABCDchecked"
            :key="item.id"
            :label="item.title"
          ></el-radio>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div v-if="questionInfo.questionType === '多选'">
        <el-checkbox-group v-model="radio2">
          <el-checkbox v-for="item in ABCDchecked" :key="item.id" :label="item.title" ></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 简答 -->
      <div v-if="questionInfo.questionType === '简答'">

      </div>
    </div>

    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          【参考答案】：<el-button size="mini" type="danger" @click="videoWork"
            >视频答案预览</el-button
          >
        </div></el-col
      >
    </el-row>
    <div>
      <video :src="questionInfo.videoURL" v-if="isShowVideo" class="videos" controls ref='vidioPlay' autoplay></video>
    </div>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">【答案解析】：见视频：
          {{questionInfo.videoURL}}

          </div></el-col
      >
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">【题目备注】：{{questionInfo.remarks}}</div></el-col
      >
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
// 方向
import { difficulty, questionType } from '@/api/hmmm/constants'
function trans (value, arr) {
  const as = arr.filter((item) => item.value.toString() === value)[0].label
  console.log(as, 222)
  return as
}
export default {
  // components: {
  //   VideoDialog
  // },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      difficulty,
      questionType,
      questionInfo: {},
      ABCDchecked: [],
      //   单选确认项
      radio1: {},
      //   多选确认项
      radio2: [],
      // 控制视频的显隐
      isShowVideo: false
    }
  },
  methods: {
    //   关闭此页
    closeDialog () {
      this.$emit('dialog-click')
    },
    async openDialog () {
      // 请求获取本行题目信息
      const a = await detail(this.rowData)
      console.log(a, 777)
      const arr = []
      //   将数据转数组便于更改其中的数据
      arr.push(a.data)
      arr.forEach((item) => {
        item.difficulty = trans(item.difficulty, this.difficulty)
      })
      arr.forEach((item) => {
        item.questionType = trans(item.questionType, this.questionType)
      })
      //   更改完数据类型后将数据赋值给对象
      this.questionInfo = arr[0]
      //   拿到所有的选项
      this.ABCDchecked = a.data.options
      //   将选项中正确项拿出
      this.radio1 = a.data.options.filter((item) => item.isRight === 1)
      console.log(this.questionInfo, 54311)
      //   新建数组，便于拿到数组radio1中的对象中的title并合成新数组
      const arr2 = []
      this.radio1.map(item => arr2.push(item.title))
      this.radio2 = arr2
    },
    videoWork () {
      this.isShowVideo = !this.isShowVideo
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog {
  .questionDatil {
    color: skyblue;
  }
  .videos{
    height: 300px;
    width: 500px;
  }
}
</style>
